<style lang="scss">

</style>

<template>
  <div class="page-home">
    <z-space vertical>
      <z-search-table :auto-init="false" ref="searchTable"
                      class="z-tree-table--def" :def="dataTable">
        <template #table__content_afterbegin>
          <div class="tree-table__menu">
            <z-tree :data="state.treeData"
                    @node-click="handleNodeClick"

            ></z-tree>
          </div>
        </template>
        <template #table__action="scope">
          <template v-if="scope.id === 'slot'">
            <el-button type="text">
              自定义操作按钮
            </el-button>
          </template>
        </template>
      </z-search-table>
<!--      <vue-code-mirror :tpl="def.tpl" :js="def.js"></vue-code-mirror>-->


      <RemoteFileViewer file="example/views/datatable/tree.vue"></RemoteFileViewer>

      <h3>ZSearchTable 参数</h3>
      <doc-props :data="doc.props"></doc-props>
    </z-space>
  </div>
</template>

<script>
import {useDataTable} from "../../../babel-static/helpers";
import VueCodeMirror from "@example/components/VueCodeMirror";
import DocProps from "@example/plugins/example/components/DocProps";
import ZTree from "@/zpkgs/components/z-tree/ZTree";
import RemoteFileViewer from "@example/plugins/example/components/RemoteFileViewer";

export default {
  components: {RemoteFileViewer, ZTree, DocProps, VueCodeMirror},
  data() {
    return {
      doc: {
        props: [
          {
            name: 'autoInit',
            type: 'Boolean',
            defVal: 'true',
            desc: '默认自动加载数据'
          },
          {
            name: 'onInit',
            type: 'Function',
            defVal: 'null',
            desc: '用户初始化后回调'
          }
        ]
      },
      rightMenu: [
        {
          name: '复制',
          command: 'copy'
        },
        {
          name: '转发',
          command: 'send'
        }
      ]
    }
  },
  mounted() {
    // console.log(this.$refs.searchTable)
    this.$refs.searchTable.search()
  },
  setup(props, ctx) {

    let config = {
      defaultUrl: '/api/list',
      request: globalThis.Req,
      columnDefMap: {
        sourceDbName: {
          formatter(row, column, cellValue) {
            return cellValue +'x';
          }
        }
      },
      appendColumns: [
        {
          width: 180,
          label: '操作',
          actions: [
            {
              id: 'detail',
              text: '详情',
              click: function () {}
            },
            {
              id: 'slot',
              useSlot: true
            }
          ]
        }
      ],
    }

    function init() {
      return useDataTable(config);
    }

    const {reactive}= vueCompositionAPI
    let state = reactive({
      treeData: []
    })

    setTimeout(() =>{
      state.treeData = [
        {
          label: '一级 1',
          children: [{
            label: '二级 1-1',
            children: [{
              label: '三级 1-1-1'
            }]
          }]
        }, {
          label: '一级 2',
          children: [{
            label: '二级 2-1',
            children: [{
              label: '三级 2-1-1'
            }]
          }, {
            label: '二级 2-2',
            children: [{
              label: '三级 2-2-1'
            }]
          }]
        }, {
          label: '一级 3',
          children: [{
            label: '二级 3-1',
            children: [{
              label: '三级 3-1-1'
            }]
          }, {
            label: '二级 3-2',
            children: [{
              label: '三级 3-2-1'
            }]
          }]
        }
      ]
    }, 3000)

    let def = {
      tpl:
`<z-search-table ref="searchTable" class="tree-table" :def="dataTable">
  <template #table__content_afterbegin>
    <div class="tree-table__menu">
      <z-tree :data="treeData"
              @node-click="handleNodeClick"
      ></z-tree>
    </div>
  </template>
  <template #table__action="scope">
    <template v-if="scope.id === 'slot'">
      <el-button type="text">
        自定义操作按钮
      </el-button>
    </template>
  </template>
</z-search-table>`,
      js:
`useDataTable({
  defaultUrl: '/api/list',
  request: globalThis.Req,
  columnDefMap: {
    sourceDbName: {
      formatter(row, column, cellValue) {
        return cellValue +'x';
      },
     search: {
              type: 'string',
              ui: { widget: 'CusInput' },
            },
    }
  },
  appendColumns: [
    {
      width: 180,
      label: '操作',
      actions: [
        {
          id: 'detail',
          text: '详情',
          click: function () {}
        },
        {
          id: 'slot',
          useSlot: true
        }
      ]
    }
  ],
});

treeData = ${ZY.JSON5.stringify(state.treeData, null, 2)}
    `
    }

    let dataTable = init();

    function handleNodeClick(data, node) {
      console.log('handleNodeClick', data, node)
      if (node.isLeaf) {
        // console.log(ctx.refs.searchTable)
        ctx.refs.searchTable.search({
          params: {

          }
        })
      }
    }


    function handleRightClick(parameter, arg) {
      console.log('handleRightClick', parameter, arg)
    }


    return {
      def,
      state,
      handleNodeClick,
      handleRightClick,
      dataTable
    }
  }
}
</script>
